<template>
    <div>
        <!-- {{clist}} -->
        {{jflist}}
        <br>
        {{timelist}}
        <br>
        <div id='main' style="width:500px;height:300px"></div>
    </div>
</template>

<script>
import {reactive} from 'vue'
import * as echarts from 'echarts';
    export default {
        setup() {
            const clist = reactive({'data':[{'name':'小张'}]})
            const jflist = reactive({'data':[]})
            const timelist = reactive({'data':[]})
            //折线图
            const getzhexian =()=>{
                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                xAxis: {
                    type: 'category',
                    data: jflist.data
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                    data: timelist.data,
                    type: 'line'
                    }
                ]
                };

                option && myChart.setOption(option);
            }


            //初始化
            const opwebsocke =()=>{
                let socket = new WebSocket('ws://localhost:8000/test/')
                //建立链接
                socket.onopen = function(){
                    console.log('建立链接')
                    
                }
                //接收消息
                socket.onmessage = function(meg){
                    
                    let data = JSON.parse(meg.data)
                    console.log(data);
                    jflist.data = data[0]
                    timelist.data = data[1]
                    getzhexian()
                    
                }

                //关闭
                socket.close= function(e){
                    console.log(e);
                    console.log('关闭');
                }
            
            }
            
            return{
                clist,opwebsocke,jflist,timelist,getzhexian

        }
        
    },
    methods: {
        
        
    },
    mounted() {
        this.opwebsocke()
        
    },
    }
</script>

<style scoped>

</style>